<template>
  <div class="chart-page">
    <div class="title">留言板</div>
    <div class="chart-box" ref="chartBox">
      <div v-for="(item, index) in messageList" :key="index">
        <div class="other-visitor" v-if="item.type === 'hint'">
          system : {{ item.username }} 加入聊天
        </div>
        <div
          class="other-visitor"
          v-else-if="userData.username !== item.username"
        >
          <div class="user-avator">
            <img :src="item.sex === 'girl' ? girlImage : boyImage" alt="" />
          </div>
          <div class="user-message">
            {{ item.username }} : {{ item.message }}
          </div>
        </div>
        <div class="own-visitor" v-else>
          <div class="user-message">
            {{ item.username }} : {{ item.message }}
          </div>
          <div class="user-avator">
            <img :src="item.sex === 'girl' ? girlImage : boyImage" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, PropType, reactive, ref, watch } from "vue";

const props = defineProps({
  messageList: {
    type: Object as PropType<IMessage[]>,
    default: [],
  },
  userData: {
    type: Object as PropType<IUserData>,
    required: true,
  },
});

const chartBox = ref();

const boyImage =
  "https://whcode-1304835985.cos.ap-nanjing.myqcloud.com/img/boy.png";
const girlImage =
  "https://whcode-1304835985.cos.ap-nanjing.myqcloud.com/img/girl.png";

watch(
  () => props.messageList,
  () => {
    nextTick(() => {
      chartBox.value.scrollTop = chartBox.value.scrollHeight;
    });
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.chart-page {
  .title {
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    font-weight: bolder;
    text-align: center;
    border-bottom: 1px solid #dcdfe6;
  }
  .chart-box {
    overflow-y: auto;
    height: 640px;
    padding: 20px;
    padding-bottom: 0;
  }
  .other-visitor,
  .own-visitor {
    margin-bottom: 10px;
    display: flex;
    .user-avator {
      width: 30px;
      height: 30px;
      border: 1px solid #dcdfe6;
      line-height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .other-visitor > .user-avator {
    margin-right: 10px;
  }
  .own-visitor > .user-avator {
    margin-left: 10px;
  }
  .user-message {
    min-height: 30px;
    line-height: 30px;
    flex: 1;
    padding: 5px 10px;
    border: 1px solid #dcdfe6;
    font-size: 14px;
  }
  img {
    width: 26px;
    height: 26px;
  }
}
</style>
